<template>
    <div class="input-form" style="width: 360px;text-align: left;margin-left: 20px">
        <h2 class="ui header">Fullstack Clothing Inquiry Sheet</h2>
        <form class="ui form" @submit="submitForm">
            <div class="field">
                <label>New Item</label>
                <input :value="newItem" name="NEW_ITEM" @input="onInputChange" type="text" placeholder="Add an item!"/>
                <span style="color: red">{{fieldErrors.newItem}}</span>
            </div>
            <div class="field">
                <label>Email</label>
                <input :value="email" name="EMAIL" @input="onInputChange" type="text" placeholder="What`s your email?"/>
                <span style="color:red">{{fieldErrors.email}}</span>
            </div>
            <div class="field">
                <label>Urgency</label>
                <select :value="urgency" name="URGENCY" @change="onInputChange" class="ui fluid search dropdown">
                    <option disabled value="">Please select one</option>
                    <option>Nonessential</option>
                    <option>Moderate</option>
                    <option>Urgency</option>
                </select>
                <span style="color: red">{{fieldErrors.urgency}}</span>
            </div>
            <div class="field">
                <div class="ui checkbox">
                    <input v-model="termsAndConditions" name="TERMS_AND_CONDITIONS" @change="onInputChange" type="checkbox"/>
                    <label>I accept the terms and conditions</label>
                    <span style="color: red">{{fieldErrors.termsAndConditions}}</span>
                </div>
            </div>
            <button v-if="this.saveStatus === 'SAVING'" disabled class="ui button">SAVING...</button>
            <button v-if="this.saveStatus === 'SUCCESS'" :disabled="isNewItemInputLimitExceeded || isNotUrgent"
                    class="ui button">
                Saved! Submit another
            </button>
            <button v-if="saveStatus === 'ERROR'" :disabled="isNewItemInputLimitExceeded || isNotUrgent"
                    class="ui button">
                Save Field - Retry!
            </button>
            <button v-if="saveStatus === 'READY'" :disabled="isNewItemInputLimitExceeded || isNotUrgent"
                    class="ui button">
                Submit
            </button>
        </form>
        <div class="ui segment">
            <h4 class="ui header">Items</h4>
            <ul>
                <li v-for="item in items" :key="item" class="item">{{item}}</li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({})
export default class BaseComponent03 extends Vue {
    name = 'BaseComponent03';
    fieldErrors = {
        newItem:undefined,
        email:undefined,
        urgency:undefined,
        termsAndConditions:undefined
    };
    loading = false;
    saveStatus = "READY";

    private submitForm(evt:any){
        evt.preventDefault();
        this.fieldErrors = this.validateForm(this.$store.state.fields);
        if(Object.keys(this.fieldErrors).length)
            return;
        const items = [...this.$store.state.items,this.$store.state.fields.newItem];
        this.saveStatus = "SAVING";
        this.$store.dispatch("saveItems",items).then(() =>{
            this.saveStatus = "SUCCESS";
        }).catch(error =>{
            console.log(error);
            this.saveStatus = "ERROR";
        })
    }

    private onInputChange(evt:any){
        const element = evt.target;
        const value = element.name === "TERMS_AND_CONDITIONS" ? element.checked : element.value;
        this.$store.commit(`UPDATE_${element.name}`,value);
    }

    private validateForm(fields:any){
        const errors:any = {};
        if(!fields.newItem) errors.newItem = "New Item Required";
        if(!fields.email) errors.email = "Email Required!!";
        if(!fields.urgency) errors.urgency = "Urgency Required";
        if(!fields.termsAndConditions){
            errors.termsAndConditions = "Terms and conditions have to be approved";
        }
        if(fields.email && !this.isEmail(fields.email)){
            errors.email = "Invalid Email";
        }
        return errors;
    }

    private isEmail(email:string):boolean{
        const re = /\S+@\S+\.\S+/
        return re.test(email)
    }
    private get newItem(){
        return this.$store.getters.newItem;
    }
    private get email(){
        return this.$store.getters.email;
    }
    private get urgency(){
        return this.$store.getters.urgency;
    }
    private termsAndConditions(){
        return this.$store.getters.termsAndConditions;
    }
    private get items(){
        return this.$store.state.items;
    }
    private get isNewItemInputLimitExceeded(){
        return this.$store.getters.isNewItemInputLimitExceeded;
    }
    private get isNotUrgent(){
        return this.$store.getters.isNotUrgency;
    }

    public created(){
        this.loading = true;
        this.$store.dispatch("loadItems").then((response) =>{
            this.loading = false;
        }).catch((error) =>{
            console.log(error);
        })
    }
}
</script>

<style scoped>

</style>
